<template>
	<view class="Collection">
		<view class="NavigationBox">
			<view class="NavigationItem" :class="{currentColor:current==index}" v-for="(item,index) in NavItem"
 :key="index" @click="selectItem(index)">{{item.name}}</view>
		</view>
		<view class="CollectionBox" v-if="CollectList.length>0">
			<view class="businessBox" v-for="(item,index) in CollectList" :key="index" v-if="current==0"
				@click="toFoodDetails" :data-id="item.id">
				<view class="businessImage">
					<image :src="getImage(item.image_url)" mode=""></image>
				</view>
				<view class="business_R">
					<view class="businessNameBox">
						<view class="businessName">{{item.name}}</view>
					</view>
					<view class="businesStype">{{item.industry}}</view>
					<view class="addressBox">
						<view class="address">{{item.detailed_address}}</view>
						<view class="addressNum">{{item.distance}}km</view>
					</view>
				</view>
			</view>
			<view class="DiscountItem" v-for="(item,index) in CollectList" :key="index" @click="toOfferDetails"
				v-if="current==1" :data-id="item.id">
				<view class="Item_top">
					<view class="ItemImage">
						<image :src="getImage(item.title_image)" mode=""></image>
					</view>
					<view class="Iteminfo">
						<view class="info_top">
							<view class="NameBox">
								<view class="Name">{{item.name}}</view>
								<!-- <view class="titmes">周一至周日|免预约</view> -->
							</view>
							<view class="buyBox" v-if="item.num>0||item.stock_num==0">抢购</view>
							<view class="buyBox" style="background: #BBBBBB;color:#fff" v-else>售罄</view>

						</view>
						<view class="priceBox">
							<view class="price">￥{{item.money}}<text
									style="margin-left: 8upx;text-decoration: line-through;color:#999;font-size: 16upx;">￥{{item.oldMoney}}</text>
							</view>
							<view class="volume">售{{item.sales_volume}}</view>
						</view>
					</view>
				</view>
				<view class="Item_bottom">
					<view class="share">
						<!-- #ifdef APP -->
						分享用户可赚取{{item.user_commission_money}}元；
						<!-- #endif -->
					</view>
					<view class="surplus" v-if="item.stock_num==0">不限量</view>
					<view class="surplus" v-else>仅剩:<text style="color:#FF5555">{{item.num}}</text>份</view>
				</view>
			</view>
			<view class="foodBox" v-if="current==2">
				<u-waterfall v-model="CollectList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="foodItem" @click="toFindDetail" v-for="(item, index) in leftList" :key="index"
							:data-id="item.id" :data-type="item.imgType">
							<view class="foodImage" v-if="!item.imgType">
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
								<view class="playIcon">
									<u-icon name="play-circle-fill" size="48"></u-icon>
								</view>
							</view>
							<view class="foodImage" v-else>
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
							</view>
							<view class="foodName">{{item.title}}</view>
							<view class="food_B">
								<view class="userInfo">
									<view class="userImage">
										<image :src="item.userImg" mode=""></image>
									</view>
									<view class="userName">{{item.user.username}}</view>
								</view>
								<view class="giveBox">
									<view v-if="!item.UserShareCollection">
										<u-icon name="heart-fill" color="#999"></u-icon>
									</view>
									<view v-else>
										<u-icon name="heart-fill" color="#FF5555"></u-icon>
									</view>
									<view class="giveNum">{{item.collect_num}}</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="foodItem" @click="toFindDetail" v-for="(item, index) in rightList" :key="index"
							:data-id="item.id" :data-type="item.imgType">
							<view class="foodImage" v-if="!item.imgType">
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
								<view class="playIcon">
									<u-icon name="play-circle-fill" size="48"></u-icon>
								</view>
							</view>
							<view class="foodImage" v-else>
								<image :src="item.titleImage" mode="widthFix" style="width: 100%;"></image>
							</view>
							<view class="foodName">{{item.title}}</view>
							<view class="food_B">
								<view class="userInfo">
									<view class="userImage">
										<image :src="item.userImg" mode=""></image>
									</view>
									<view class="userName">{{item.user.username}}</view>
								</view>
								<view class="giveBox">
									<view v-if="!item.UserShareCollection">
										<u-icon name="heart-fill" color="#999"></u-icon>
									</view>
									<view v-else>
										<u-icon name="heart-fill" color="#FF5555"></u-icon>
									</view>
									<view class="giveNum">{{item.collect_num}}</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>

		</view>
		<view class="emptyBox" v-else>
			<u-empty text="没有收藏哦~" mode="favor" icon-size="200"></u-empty>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				NavItem: [{
					name: "商户"
				}, {
					name: "套餐"
				}, {
					name: "内容"
				}],
				current: 0,
				CollectList: [],
				page: 1,
				moreFlag: false
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onLoad() {
			this.getList();
		},
		methods: {
			toFindDetail(e) {
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let type = e.target.dataset.type || e.currentTarget.dataset.type;
				if (type) {
					uni.navigateTo({
						url: "/pages/pagetwo/pages/FindDetail/FindDetail?id=" + id
					})
				} else {
					uni.navigateTo({
						url: "/pages/pagefive/pages/VideoDetail/VideoDetail?id=" + id
					})
				}
			},
			toOfferDetails(e) {
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "/pages/pagethree/pages/OfferDetails/OfferDetails?id=" + id
				})
			},
			toFoodDetails(e) {
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url: "/pages/pagetwo/pages/FoodDetails/FoodDetails?id=" + id
				})
			},
			getVideoUrl(url) {
				return app.$vm.globalData.imgBaseUrl + url + app.$vm.globalData.videoThumb;
			},
			getImage(url) {
				if (url && (url.indexOf("http://") != -1 || url.indexOf("https://") != -1)) {
					return url;
				} else {
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getList() {
				let obj = {};
				obj.user_id = uni.getStorageSync("userId");
				obj.page = this.page;
				if (this.current == 0) {
					this.$u.api.shopBrowseLogList(obj).then(res => {
						if (this.page == 1) {
							this.CollectList = res.data.data.map(cur => {
								cur.distance = app.$vm.getDistance(Number(cur.dimension), Number(cur
									.longitude));
								return cur;
							});
						} else {
							this.CollectList = this.CollectList.concat(res.data.data.map(cur => {
								cur.distance = app.$vm.getDistance(Number(cur.dimension), Number(
									cur.longitude));
								return cur;
							}));
						}
						if (this.page < res.data.total) {
							this.moreFlag = true;
						} else {
							this.moreFlag = false;
						}
            console.log(	this.CollectList);return;
					})
				} else if (this.current == 1) {
					this.$u.api.shopPackageBrowseLogList(obj).then(res => {
						//console.log(res)
						if (this.page == 1) {
							this.CollectList = res.data.data.map(cur => {
								cur.limit_time = JSON.parse(cur.limit_time);
								if (cur.package_title) {
									let arr = JSON.parse(cur.package_title);
									let pArr = [];
									for (let i = 0; i < arr.length; i++) {
										let price = 0;
										if (arr[i].conList) {
											for (let j = 0; j < arr[i].conList.length; j++) {
												price = price + Number(arr[i].conList[j].price);
											}
										}
										pArr.push(price);
									}
									let money = pArr.length > 0 ? pArr[0] : 0;
									for (let i = 0; i < pArr.length; i++) {
										if (money < pArr[i]) {
											money = pArr[i];
										}
									}
									cur.oldMoney = money;
								} else {
									cur.oldMoney = 0;
								}
								return cur;
							})
						} else {
							this.CollectList = this.CollectList.concat(res.data.data.map(cur => {
								cur.limit_time = JSON.parse(cur.limit_time);
								if (cur.package_title) {
									let arr = JSON.parse(cur.package_title);
									let pArr = [];
									for (let i = 0; i < arr.length; i++) {
										let price = 0;
										if (arr[i].conList) {
											for (let j = 0; j < arr[i].conList.length; j++) {
												price = price + Number(arr[i].conList[j].price);
											}
										}
										pArr.push(price);
									}
									let money = pArr.length > 0 ? pArr[0] : 0;
									for (let i = 0; i < pArr.length; i++) {
										if (money < pArr[i]) {
											money = pArr[i];
										}
									}
									cur.oldMoney = money;
								} else {
									cur.oldMoney = 0;
								}
								return cur;
							}))
						}

						if (this.page < res.data.total) {
							this.moreFlag = true;
						} else {
							this.moreFlag = false;
						}
					})
				} else if (this.current == 2) {
					this.$u.api.shareBrowseLogList(obj).then(res => {

						if (this.page == 1) {
							this.CollectList = [];
							for (let i = 0; i < res.data.data.length; i++) {
								let cur = res.data.data[i];
                console.log(cur)
								if (cur) {
									if (cur.ShareImage && cur.ShareImage.length > 0) {
										if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
											cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
											cur.imgType = true;
										} else {
											cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
											cur.imgType = false;
										}
									} else {
										cur.imgType = true;
									}
									cur.userImg = this.getImage(cur.user.image_url);
									this.CollectList.push(cur)
								}
							}
							this.$forceUpdate();
						} else {
							for (let i = 0; i < res.data.data.length; i++) {
								let cur = res.data.data[i].share;
								if (cur) {
									if (cur.ShareImage && cur.ShareImage.length > 0) {
										if (app.$vm.isImage(cur.ShareImage[0].image_url)) {
											cur.titleImage = this.getImage(cur.ShareImage[0].image_url);
											cur.imgType = true;
										} else {
											cur.titleImage = this.getVideoUrl(cur.ShareImage[0].image_url);
											cur.imgType = false;
										}
									} else {
										cur.imgType = true;
									}
									cur.userImg = this.getImage(cur.user.image_url);
									this.CollectList.push(cur)
								}
							}
							this.$forceUpdate();
						}
						if (this.page < res.data.total) {
							this.moreFlag = true;
						} else {
							this.moreFlag = false;
						}
					})
				}

			},
			selectItem(index) {
				this.CollectList = [];
				this.page = 1;
				this.current = index;
				this.getList();
			}
		}
	}
</script>

<style scoped lang="less">
	.DiscountItem {
		width: 702upx;
		background: #FFFFFF;
		box-shadow: 0 0 12upx rgba(0, 0, 0, 0.16);
		opacity: 1;
		padding: 16upx;
		margin-bottom: 24upx;

		.Item_top {
			display: flex;
			padding-bottom: 16upx;
			border-bottom: 2upx solid #F5F5F5;

			.ItemImage {
				width: 112upx;
				height: 112upx;
				border-radius: 8upx;
				overflow: hidden;
				// background-color: #F0AD4E;
				margin-right: 16upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
			}

			.Iteminfo {
				width: calc(100% - 128upx);

				.info_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16upx;

					.NameBox {
						.Name {
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #333333;
							margin-bottom: 16upx;
						}

						.titmes {
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}

					.buyBox {
						width: 96upx;
						height: 56upx;
						background: linear-gradient(180deg, #FFAC3F 0%, #FC8643 100%);
						opacity: 1;
						border-radius: 28upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 56upx;
						text-align: center;
						color: #FFFFFF;
					}
				}

				.priceBox {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #FFAC3F;
					}

					.volume {
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #D0D0D0;
					}
				}
			}
		}

		.Item_bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16upx 0;

			.share {
				font-size: 16upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}

			.surplus {
				font-size: 16upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.foodBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24upx;

		.foodItem {
			width: 342upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 8upx;
			margin-bottom: 16upx;
			overflow: hidden;

			.foodImage {
				position: relative;
				width: 342upx;

				// height: 360upx;
				// border: 8upx  8upx   0 0;
				.playIcon {
					position: absolute;
					top: 20upx;
					right: 20upx;
				}

				/deep/.uni-video-container {
					background-color: #fff;
				}

				// video{
				// 	width: 100%;
				// 	height: 100%;
				// }
				// image{
				// 	width: 100%;
				// 	height: 100%;
				// }
			}

			.foodName {
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				padding: 16upx;
			}

			.food_B {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16upx;

				.userInfo {
					display: flex;
					align-items: center;

					.userImage {
						width: 32upx;
						height: 32upx;
						border-radius: 50%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.userName {
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-left: 8upx;
					}
				}

				.giveBox {
					display: flex;
					align-items: center;

					.giveNum {
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-left: 4upx;
					}
				}
			}
		}
	}

	.Collection {
		background-color: #F3F3F3;
		min-height: 100vh;
		overflow: auto;
		padding-top: 100upx;

		.NavigationBox {
			position: fixed;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24upx 207upx;
			background-color: #fff;
			width: 750upx;
			height: 100upx;
			z-index: 999;

			.NavigationItem {
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				padding: 8upx 0;
			}

			.currentColor {
				color: #FFAC3F;
				border-bottom: 5upx solid #FFAC3F;
			}
		}

		.CollectionBox {
			padding: 16upx 24upx;

			.businessBox {
				display: flex;
				width: 702upx;
				background: #FFFFFF;
				box-shadow: 0 0 12upx rgba(0, 0, 0, 0.1);
				opacity: 1;
				border-radius: 8upx;
				padding: 24upx 16upx;
				margin-bottom: 16upx;

				.businessImage {
					width: 96upx;
					height: 96upx;
					border-radius: 8upx;
					margin-right: 16upx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.business_R {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(702upx - 144upx);

					.businessNameBox {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.businessName {
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
						}
					}

					.businesStype {
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}

					.addressBox {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}

		.emptyBox {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750upx;
			height: 600upx;
		}
	}
</style>
